<template>
  <view class="class_intro">
    <view class="top">
      <h2>高等数学</h2>
      <view class="school_teacher">
        <span class="school">电子科技大学</span>
        <span class="teacher">张三</span>
      </view>
    </view>
    <view class="main">
      <!-- 课程简介 -->
      <view class="introduce">
        <h2>课程介绍</h2>
        <u-read-more :toggle="true" showHeight="100">
          <rich-text :nodes="content"></rich-text>
        </u-read-more>
      </view>
      <!-- 课程大纲预览 -->
      <view class="outline">
        <h2>课程大纲</h2>
        <ul>
          <li v-for="item in outline" :key="item.title">
            <view class="title">
              {{item.title_text}}
            </view>
          </li>
        </ul>
      </view>
      <!-- 推荐课程 -->
      <view class="recommend">
        <h2>评价与讨论</h2>
        <view class="item">
          课程1
        </view>
        <view class="item">
          课程2
        </view>
        <view class="item">
          课程3
        </view>
      </view>
      <!-- 评价与讨论 -->
      <view class="evaluate">
        <h2>推荐课程</h2>
        <view class="item">
          评价1
        </view>
        <view class="item">
          评价2
        </view>
        <view class="item">
          评价3
        </view>
      </view>
    </view>
    <button type="primary" class="btn_learn">立即学习</button>
  </view>
</template>

<script>
  export default {
    name: "class_introduce",
    props: ["class_outline"],
    data() {
      return {
        outline: this.class_outline,
        // 这是一段很长的文字，也可能包含有HTML标签等内容
        content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
        				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
        				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
                山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
                				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
                				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
                        山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
                        				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
                        				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
      };
    }
  }
</script>

<style lang="less">
.class_intro {
  padding: 30rpx 30rpx 100rpx 30rpx;
  .top {
    height: 150rpx;
    border-bottom: 1px solid #b6b6b6;
    h2 {
      font-size: 48rpx;
      font-weight: 800;
    }
    .school_teacher {
      margin-top: 20rpx;
      span {
        margin-right: 20rpx;
        color: grey;
      }
    }
  }
  .main {
    margin-top: 30rpx;
    .introduce {
      h2 {
        font-size: 40rpx;
        font-weight: 800;
      }
    }
    .outline {
      h2 {
        font-size: 40rpx;
        font-weight: 800;
      }
      ul {
        padding: 20rpx 20rpx;
        height: 200rpx;
        overflow: scroll;
      }
    }
    .recommend {
      h2 {
        font-size: 40rpx;
        font-weight: 800;
      }
      .item {
        margin: 10rpx 0;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        border-radius: 10rpx;
        box-shadow: 1px 1px 1px 1px grey;
      }
    }
    .evaluate {
      h2 {
        font-size: 40rpx;
        font-weight: 800;
      }
    }
  }
  .btn_learn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 30rpx;
    background-color: #55aaff;
  }
}
</style>
